import React, { useEffect, useState } from 'react'
import { IndexBar, List } from 'antd-mobile'
import { address } from '../apis/home'
import { useNavigate } from "react-router-dom"
import Navbar from '../components/Navbar';

export default function Address(props: any) {
  const navigate = useNavigate();
  const [city, setcity] = useState<any>([])

  useEffect(() => {
    list()
  }, [])

  let list = async () => {
    let res = await address()
    setcity(res)

  }
  return (
    <div className='address' style={{ height: window.innerHeight }}>
      <Navbar title="地址"/>
      <IndexBar>
        {
          city.map((group: any) => {
            const { letter, data } = group
            return (
              <IndexBar.Panel
                index={letter}
                title={letter}
                key={`标题${letter}`}
              >
                <List>
                  {data.map((item: any) => (
                    <List.Item arrow={false} key={item.cityId} onClick={() => { navigate('/index/home',{state:{address:item.name}}) }}>{item.name}</List.Item>
                  ))}
                </List>
              </IndexBar.Panel>
            )
          })
        }
      </IndexBar>
      address
    </div>
  )
}
